<template>
  <section class="jumbotron">
    <h3 class="jumbotron-heading">Search Github Users</h3>
    <div>
      <input
        type="text"
        v-model.trim.lazy="userName"
        placeholder="enter the name you search"
      />
      <button @click="handleSearch">Search</button>
    </div>
  </section>
</template>

<script>
import { mapActions } from 'vuex';
export default {
  name: 'v-header',
  methods: {
    ...mapActions(['getUserName', 'clearUserName', 'getUsers']),
    handleSearch() {
      //发送请求获取用户列表
      this.getUsers();
      //清空输入框
      this.clearUserName();
    },
  },
  computed: {
    userName: {
      get() {
        return this.$store.state.userName;
      },
      set(userName) {
        //转发action 提交mutation 同步的修改数据
        // this.$store.dispatch('getUserName', userName);
        this.getUserName(userName);
      },
    },
  },
};
</script>

<style scoped></style>
